<template>
  <div class="manga-setting-box manage-container">
    <div class="btn-box">
      <el-button type="primary" :icon="Refresh" @click="reload_table">{{ $t('option.refresh') }}</el-button>
      <el-button class="add-btn" type="success" :icon="Plus" @click="() => new_dialog()">{{ $t('option.add') }}</el-button>
      <el-button type="danger" :disabled="selectedRows.length === 0" :icon="Delete" @click="batch_delete_tag">{{ $t('option.delete') }}</el-button>
    </div>
    <!--表格-->
    <el-table :data="tableData" stripe border @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column type="index" :label="$t('account.serial')" width="54"></el-table-column>

      <el-table-column prop="tagId" :label="$t('tagSetting.table.tagId')" width="64"></el-table-column>

      <el-table-column prop="tagName" :label="$t('tagSetting.table.tagName')" width="120"></el-table-column>

      <el-table-column :label="$t('tagSetting.table.tagColor')" width="120">
        <template v-slot="scope">
          <div class="color-preview-container">
            <div class="color-preview" :style="{backgroundColor: scope.row.tagColor}"></div>
            <span class="color-text">{{ scope.row.tagColor }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="description" :label="$t('tagSetting.table.description')"></el-table-column>

      <el-table-column prop="createTime" :label="$t('mangaManage.createTime')" width="160"></el-table-column>

      <el-table-column prop="updateTime" :label="$t('mangaManage.updateTime')" width="160"></el-table-column>

      <el-table-column :label="$t('account.option')" width="200">
        <template v-slot="scope">
          <el-button size="small" type="primary" :icon="Edit" @click="update_dialog(true, scope.row)">{{ $t('option.modify') }}</el-button>
          <el-button size="small" type="danger" :icon="Delete" @click="delete_tag(scope.row)">{{ $t('option.delete') }}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <table-pager ref="pager" @pageChange="load_table" :page-size="browse.manageListPageSize" :count="count" :loading="loading" />

    <!-- 新增标签弹框 -->
    <el-dialog :title="$t('tagSetting.dialog.addTitle')" v-model="addTagDialog">
      <el-form :model="form" label-width="11rem">
        <el-form-item :label="$t('tagSetting.dialog.tagName')">
          <el-input v-model="form.tagName" :placeholder="$t('tagSetting.dialog.tagNamePlaceholder')"></el-input>
        </el-form-item>

        <el-form-item :label="$t('tagSetting.dialog.tagColor')">
          <el-input v-model="form.tagColor" :placeholder="$t('tagSetting.dialog.tagColorPlaceholder')"></el-input>
        </el-form-item>

        <el-form-item :label="$t('tagSetting.dialog.description')">
          <el-input v-model="form.description" :placeholder="$t('tagSetting.dialog.descriptionPlaceholder')"></el-input>
        </el-form-item>
      </el-form>

      <p class="note form-note">{{ $t('tagSetting.dialog.tagColorNote') }}</p>

      <template v-slot:footer>
        <div class="dialog-footer">
          <!--按钮盒子-->
          <div class="dialog-btn-box">
            <el-button type="primary" @click="add_tag">{{ $t('option.confirm') }}</el-button>
            <el-button type="warning" @click="new_dialog(false)">{{ $t('option.cancel') }}</el-button>
          </div>
        </div>
      </template>
    </el-dialog>

    <!-- 修改标签弹框 -->
    <el-dialog :title="$t('tagSetting.dialog.updateTitle')" v-model="updateTagDialog">
      <el-form :model="form" label-width="11rem">
        <el-form-item :label="$t('tagSetting.dialog.tagName')">
          <el-input v-model="form.tagName" :placeholder="$t('tagSetting.dialog.tagNamePlaceholder')"></el-input>
        </el-form-item>

        <el-form-item :label="$t('tagSetting.dialog.tagColor')">
          <el-input v-model="form.tagColor" :placeholder="$t('tagSetting.dialog.tagColorPlaceholder')"></el-input>
        </el-form-item>

        <el-form-item :label="$t('tagSetting.dialog.description')">
          <el-input v-model="form.description" :placeholder="$t('tagSetting.dialog.descriptionPlaceholder')"></el-input>
        </el-form-item>
      </el-form>

      <template v-slot:footer>
        <div class="dialog-footer">
          <!--按钮盒子-->
          <div class="dialog-btn-box">
            <el-button type="primary" @click="update_tag">{{ $t('option.confirm') }}</el-button>
            <el-button type="warning" @click="update_dialog(false)">{{ $t('option.cancel') }}</el-button>
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import {Delete, Edit, Plus, Refresh} from '@element-plus/icons-vue';
import {ref, reactive, onMounted} from 'vue';
import tagApi, {tagParams} from '@/api/tag';
import tablePager from '@/components/table-pager.vue';
import i18n from '@/i18n';
import useBrowseStore from '@/store/browse';
import { tagItemType } from '@/type/tag';

const browse = useBrowseStore();

const {t} = i18n.global;
const pager = ref();
let count = ref(0);
let tableData = ref([]);
let addTagDialog = ref(false);
let updateTagDialog = ref(false);
let loading = ref(false);
let selectedRows = ref<tagItemType[]>([]);
let form = reactive({
  tagId: 0,
  tagName: '',
  tagColor: '',
  description: '',
});

let formInit = {
  tagId: 0,
  tagName: '',
  tagColor: '',
  description: '',
};

onMounted(() => {
  load_table();
});

function new_dialog(bool = true) {
  // 关闭弹窗的时候 清空数据
  if (!bool) {
    Object.assign(form, formInit);
  }

  addTagDialog.value = bool;
}

function update_dialog(bool = true, row?: tagParams) {
  // 打开弹框的时候加载数据
  if (bool) {
    Object.assign(form, row);
  }

  updateTagDialog.value = bool;
}
/**
 * @description: 新增标签
 * @return {*}
 */
async function add_tag() {
  const tagName = form.tagName;
  const tagColor = form.tagColor || '#a0d911'; // 默认颜色
  const description = form.description;

  await tagApi.add(tagName, tagColor, description);

  reload_table();

  new_dialog(false);
}

/**
 * @description: 加载表格数据
 * @param {*} page
 * @param {*} pageSize
 * @return {*}
 */
async function load_table(page = 1, pageSize = 10) {
  loading.value = true;
  try {
    const res = await tagApi.get(page, pageSize);
    count.value = res.count;
    tableData.value = res.list;

    browse.manageListPage = page;
    browse.manageListPageSizeCache = pageSize;
  } finally {
    loading.value = false;
  }
}

/**
 * @description: 重载数据 页码不变
 * @return {*}
 */
function reload_table() {
  tableData.value = [];
  selectedRows.value = [];
  load_table(browse.manageListPage, browse.manageListPageSize);
}

/**
 * @description: 执行修改请求
 * @return {*}
 */
async function update_tag() {
  // 表单校验-检查漫画名
  if (!form.tagName) {
    ElMessage.warning(t('tagSetting.dialog.nameWarning'));
    return false;
  }

  await tagApi.update(form);

  reload_table();

  update_dialog(false);
}

/**
 * @description: 删除漫画
 * @param {*} row
 * @return {*}
 */
async function delete_tag(row: any) {
  ElMessageBox.confirm(t('tagSetting.dialog.confirmText'), t('tagSetting.dialog.confirmTitle'), {
    type: 'warning',
  })
    .then(async () => {
      await tagApi.delete(row.tagId);
      reload_table();
    })
    .catch(() => {});
}

/**
 * @description: 处理表格选择变化
 * @param {any[]} val
 * @return {*}
 */
function handleSelectionChange(val: tagItemType[]) {
  selectedRows.value = val;
}

/**
 * @description: 批量删除标签
 * @return {*}
 */
async function batch_delete_tag() {
  if (selectedRows.value.length === 0) {
    ElMessage.warning(t('tagSetting.dialog.nameWarning'));
    return false;
  }

  ElMessageBox.confirm(t('tagSetting.dialog.batchDeleteText'), t('tagSetting.dialog.batchDeleteTitle'), {
    type: 'warning',
  })
    .then(async () => {
      const tagIds = selectedRows.value.map(row => row.tagId);
      await tagApi.batch_delete(tagIds);
      reload_table();
    })
    .catch(() => {});
}
</script>
<style scoped lang="less" src="@/style/manage.less"></style>
